<script setup lang="ts">
import axios from "axios";
import { get, post } from "../../../utils/request";
import utils from "../../../utils/utils";

const env = import.meta.env;
const url = env.VITE_API_URL;

const handleGet = () => {
  axios
    .get(url + "/test", {
      data: {
        echo: "abc",
      },
      headers: {
        // 自定义 HTTP header 会导致跨域 CORS Missing Allow Header
        // token: "none token",
      },
    })
    .then((response) => {
      console.log(response.data);
    });
};

const handlePost = () => {
  axios
    .post(url + "/api/user.get", {
      data: {
        token: "aabc",
      },
      headers: {
        // 自定义 HTTP header 会导致跨域 CORS Missing Allow Header
        // token: "none token",
      },
    })
    .then((response) => {
      console.log(response.data);
    });
};

const handleUnknowUrl = () => {
  axios
    .get("https://abc.efg.com/auth/test", {
      data: {
        echo: "abc",
      },
      headers: {
        // 自定义 HTTP header 会导致跨域 CORS Missing Allow Header
        // token: "none token",
      },
    })
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      // debugger;
      if (error.response) {
        // The request was made and the server responded with a status code
        // that falls out of the range of 2xx
        // console.log(error.response.data);
        // console.log(error.response.status);
        // console.log(error.response.headers);
        console.error(
          "The request was made and the server responded with a status code that falls out of the range of 2xx: ",
          error.message
        );
      } else if (error.request) {
        // The request was made but no response was received
        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
        // http.ClientRequest in node.js
        // console.log(error.request);
        console.error(
          "The request was made but no response was received: ",
          error.message
        );
      } else {
        // Something happened in setting up the request that triggered an Error
        console.error(
          "Something happened in setting up the request that triggered an Error: ",
          error.message
        );
      }
      // console.log(error.config);
    });
};

const handleRequestGet = () => {
  get("/test", { echo: "abc" }).then((respons) => {
    console.log("respons:", respons);
  });
};

const handleRequestHello = () => {
  get("/hello", { echo: "abc" }).then((respons) => {
    console.log("respons:", respons);
  });
};

const handleRequestPost = () => {
  ///admin/api/msg.listing
  // debugger;
  post("/api/user.get", { echo: "abc" }).then((respons) => {
    console.log("respons:", respons);
  });
};

const handleRequestUnknowUrl = () => {
  post("/api/user.get2", { echo: "abc" }).then((respons) => {
    console.log("respons:", respons);
  });
};
</script>

<template>
  <h1>axios、el-notification、mock</h1>
  <p>官网 <a href="http://mockjs.com" target="_blank">http://mockjs.com</a></p>
  <p>浏览器开发者工具 console、network 页签查看调用信息</p>
  <a href="javascript:void(0)" @click="handleGet()">原生 get</a> &nbsp;
  <a href="javascript:void(0)" @click="handlePost()">原生 post</a> &nbsp;
  <a href="javascript:void(0)" @click="handleUnknowUrl()"
    >原生 request 不存在url</a
  >
  &nbsp;
  <a href="javascript:void(0)" @click="handleRequestGet()">包装类 get</a> &nbsp;
  <a href="javascript:void(0)" @click="handleRequestHello()">包装类 get</a>
  &nbsp;
  <a href="javascript:void(0)" @click="handleRequestPost()">包装类 post</a>
  &nbsp; &nbsp;
  <a href="javascript:void(0)" @click="handleRequestUnknowUrl()"
    >包装类 request 不存在url，全局异常处理</a
  >
</template>
